<template>
  <el-dialog :title="title" :visible.sync="open" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单分类" prop="orderSource">
            <el-select v-model="form.orderSource" placeholder="请选择订单分类">
              <el-option
                v-for="dict in dict.type.order_categorize"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="cid">
            <el-select v-model="form.cid" clearable placeholder="请选择车牌号" @change="handleChangeCar">
              <el-option
                v-for="item in goodsList"
                value-key="id"
                :label="item.carnum"
                :value="item.id"
                :disabled="item.status == 0"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆名称" prop="carname">
            <el-input v-model="form.carName" placeholder="请输入车辆名称" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号" prop="utelphone">
            <el-input v-model="form.utelphone" placeholder="请输入客户手机号码"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车时间" prop="startTime">
            <el-date-picker clearable
                            v-model="form.startTime"
                            :picker-options="pickerOption"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm"
                            placeholder="请选择取车时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="还车时间" prop="endTime">
            <el-date-picker clearable
                            v-model="form.endTime"
                            :picker-options="pickerOption0"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm"
                            @change="handleEndDateChange"
                            placeholder="请选择还车时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车方式" prop="gettype">
            <el-radio-group v-model="form.pickUpMode">
              <el-radio
                v-for="dict in dict.type.order_gettype"
                :key="dict.value"
                :label="parseInt(dict.value)"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取车门店" prop="startShop">
            <el-select v-model="form.deptId" clearable placeholder="请选择取车门店" @change="changeDept">
              <el-option
                v-for="item in branchOptions"
                :key="item.id"
                :label="item.name"
                :value="item.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务类型" prop="orderType">
            <el-select v-model="form.orderType" placeholder="请选择服务类型">
              <el-option
                v-for="dict in dict.type.order_servicetype"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总天数" prop="day">
            <el-input v-model="form.day" placeholder="请输入总天数" disabled></el-input>
            <!--            <el-input v-model="form.day" placeholder="请输入总天数"/>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆天单价" prop="money">
            <el-input v-model="form.money" placeholder="请输入车辆天单价" @blur="handleBlur"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="总价" prop="totalMoney">
            <el-input v-model="form.totalMoney" placeholder="请输入总价" @blur="handleTotalBlur"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio
                v-for="dict in dict.type.order_type"
                :key="dict.value"
                :label="parseInt(dict.value)"
              >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否支付" prop="ispay">
            <el-select v-model="form.ispay" placeholder="请选择是否支付">
              <el-option
                v-for="dict in dict.type.order_ispay"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否退车辆押金" prop="isReturnVehDeposit">
            <el-select v-model="form.isReturnVehdeposit">
              <el-option
                v-for="dict in dict.type.order_is_return_vehdeposit"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否退违章押金" prop="isReturnVioDeposit">
            <el-select v-model="form.isReturnViodeposit">
              <el-option
                v-for="dict in dict.type.order_is_return_viodeposit"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="支付时间" prop="paytime">-->
<!--            <el-date-picker clearable-->
<!--                            v-model="form.paytime"-->
<!--                            type="date"-->
<!--                            value-format="yyyy-MM-dd"-->
<!--                            placeholder="请选择支付时间">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="车辆来源" prop="vehicleDisting">
            <el-select v-model="form.vehicleDisting" clearable placeholder="请选择车辆来源" disabled>
              <el-option
                v-for="dict in dict.type.vehicle_source"
                :key="Number(dict.value)"
                :label="dict.label"
                :value="Number(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务单位" prop="bussinessUnitId">
            <el-select v-model="form.bussinessUnitId" clearable placeholder="请选择">
              <el-option
                v-for="item in businessUnitList"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="取车姓名" prop="username">
            <el-input v-model="form.username" placeholder="请输入取车姓名"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="取车电话" prop="tel">
            <el-input v-model="form.utelphone" placeholder="请输入取车电话"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="驾驶员姓名" prop="driverName">
            <el-input v-model="form.driverName" placeholder="请输入驾驶员姓名"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="驾驶员手机" prop="driverPhone">
            <el-input v-model="form.driverPhone" placeholder="请输入驾驶员手机号码"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {addVhiceodr, updateVhiceodr} from "@/api/merchant/order";
import {listCar} from "@/api/merchant/car";
import {storesRoleList} from "@/api/merchant/stores";
import {listVehcusunit} from "@/api/cusunit/vehcusunit";

export default {
  name: "addOrder",
  props: ['dict'],
  created() {
    this.init()
  },
  data() {
    let now = new Date()
    return {
      title: '',
      goodsList: [],
      businessUnitList:[],
      pickerOption: {
        disabledDate: (time) => {
          if (this.form && this.form.endTime)
            return time.getTime() >= new Date(this.form.endTime).getTime() || now.getTime() >= time.getTime()
          else
            return now.getTime() >= time.getTime()
        }
      },
      pickerOption0: {
        disabledDate: (time) => {
          if (this.form && this.form.startTime)
            return time.getTime() <= new Date(this.form.startTime).getTime()
          else
            return now.getTime() >= time.getTime()
        }
      },
      // 表单校验
      rules: {
        orderType: [
          {required: true, message: "服务类型", trigger: "blur"}
        ],
        orderSource: [
          {required: true, message: "请选择订单分类", trigger: "blur"}
        ],
        cid: [
          {required: true, message: "车牌号不能为空", trigger: "blur"}
        ],
        carname: [
          {required: true, message: "车辆名称不能为空", trigger: "blur"}
        ],
        utelphone: [
          {required: true, message: "客户手机号不能为空", trigger: "blur"}
        ],
        gettype: [
          {required: true, message: "请选择取车方式", trigger: "blur"}
        ],
        startTime: [
          {required: true, message: "请选择取车时间", trigger: "blur"}
        ],
        endTime: [
          {required: true, message: "请选择还车时间", trigger: "blur"}
        ],
        startShop: [
          {required: true, message: "请选择取车门店", trigger: "blur"}
        ],
        day: [
          {required: true, message: "总天数不能为空", trigger: "blur"}
        ],
        money: [
          {required: true, message: "车辆天单价不能为空", trigger: "blur"}
        ],
        totalMoney: [
          {required: true, message: "总价不能为空", trigger: "blur"}
        ],
        prepayMoney: [
          {required: true, message: "支付金额不能为空", trigger: "blur"}
        ]
      },
      // 表单参数
      form: {
        bussinessUnitId:'',
        id: null,
        cid: null,
        carNum: null,
        carName: null,
        gettype: null,
        type: null,
        typeid: null,
        startTime: null,
        bookStartTime: null,
        endTime: null,
        bookEndTime: null,
        startShop: null,
        endShop: null,
        day: null,
        uniacid: null,
        uid: null,
        createtime: null,
        status: null,
        membertype: null,
        delay: null,
        integralMoney: null,
        integral: null,
        money: null,
        totalMoney: null,
        prepayMoney: null,
        fee: null,
        serviceFee: null,
        zxServiceFee: null,
        openZxService: null,
        couponMoney: null,
        coupon: null,
        ispay: null,
        istui: null,
        paytime: null,
        isuse: null,
        usetime: null,
        outTradeNo: null,
        outRefundNo: null,
        transid: null,
        ordernum: null,
        username: null,
        tel: null,
        prepayId: null,
        active: null,
        display: null,
        returnTime: null,
        ispl: null,
        xzday: null,
        xzmoney: null,
        xztime: null,
        driveid: null,
        iszx: null,
        isdeposit: null,
        depositMoney: null,
        parentId1: null,
        parentId2: null,
        parentId3: null
      },
      open: false,
      branchOptions: []
    }
  }, methods: {
    init() {
      listCar({
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.goodsList = res.rows
        }
      })
      storesRoleList({
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.branchOptions = res.rows
        }
      })
      listVehcusunit({pageNum: 1, pageSize: 100}).then(response => {
        let info = response.rows
        this.businessUnitList = []
        for (let i = 0; i < info.length; i++) {
          if (info[i].unitType == 0) {
            this.businessUnitList.push({label: info[i].personName, value: info[i].id})
          } else {
            this.businessUnitList.push({label: info[i].supplierUnitName, value: info[i].id})
          }
        }
      });
    },
    handleEndDateChange() {
      var timeDay = 0;
      //this.form.startTime为开始时间
      let today = new Date(this.form.startTime);
      //格式化为年月日时分秒
      today.setHours(0, 0, 0, 0);
      //this.form.endTime为结束时间
      if (this.form.endTime != null) {
        var timeDiff = new Date(this.form.endTime) - 0 - new Date(today) - 0
        timeDay = (timeDiff / 86400000)
      } else {
        timeDay = 0
      }
      //有效位数进行保留，取整
      this.form.day = Number(timeDay * 1).toFixed(0);

    },
    cancel() {
      this.open = false
    },
    changeDept(id) {
      for (let i = 0; i < this.branchOptions.length; i++) {
        if (this.branchOptions[i].id == id) {
          this.form.sotreName = this.branchOptions[i].name
          console.log('deptId', this.form.deptId)
          break
        }
      }
    },
    submitForm() {
      if (this.form.id) {
        updateVhiceodr(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$emit('update')
          this.open=false
        });
      } else {
        if (this.form) {
          if (this.form.startTime) {
              this.form.bookStartTime = this.form.startTime
          }
          if (this.form.endTime) {
              this.form.bookEndTime = this.form.endTime
          }
        }
        addVhiceodr(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$emit('update')
          this.open=false
        });
      }
    },
    handleBlur(event) {
      this.form.totalMoney = this.form.day * this.form.money;
    },
    handleTotalBlur() {
      this.form.money = (this.form.totalMoney / this.form.day).toFixed(2);
    },
    handleChangeCar(data) {
      console.log('car', data)
      for (let i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].id == data) {
          this.form.carName = this.goodsList[i].name
          this.form.carNum = this.goodsList[i].carNum
          this.form.vehicleDisting=this.goodsList[i].vehicleDisting
          break
        }
      }
    },
    openUpdateOrder(info) {
      this.open = true
      if (info) {
        this.form = info
        this.title = "修改订单"
      } else {
        this.title = "新增订单"
        this.form = {
          bussinessUnitId:'',
          id: null,
          cid: null,
          carNum: null,
          carName: null,
          gettype: null,
          type: null,
          typeid: null,
          startTime: null,
          bookStartTime: null,
          endTime: null,
          bookEndTime: null,
          startShop: null,
          endShop: null,
          day: null,
          uniacid: null,
          uid: null,
          createtime: null,
          status: null,
          membertype: null,
          delay: null,
          integralMoney: null,
          integral: null,
          money: null,
          totalMoney: null,
          prepayMoney: null,
          fee: null,
          serviceFee: null,
          zxServiceFee: null,
          openZxService: null,
          couponMoney: null,
          coupon: null,
          ispay: null,
          istui: null,
          paytime: null,
          isuse: null,
          usetime: null,
          outTradeNo: null,
          outRefundNo: null,
          transid: null,
          ordernum: null,
          username: null,
          tel: null,
          prepayId: null,
          active: null,
          display: null,
          returnTime: null,
          ispl: null,
          xzday: null,
          xzmoney: null,
          xztime: null,
          driveid: null,
          iszx: null,
          isdeposit: null,
          depositMoney: null,
          parentId1: null,
          parentId2: null,
          parentId3: null
        }
      }
    },
  }
}
</script>
<style scoped lang="scss">

</style>
